<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="任务">
            {{ questionnaireName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工作序言">
            {{ formItem.preface }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="例行工作类（次）">
            {{ formItem.statsRoutineWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机房设施类（次）">
            {{ formItem.statsEnvWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网络类（次）">
            {{ formItem.statsNetworkWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安全类（次）">
            {{ formItem.statsSecurityWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务器类（次）">
            {{ formItem.statsServerWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存储设备类（次）">
            {{ formItem.statsStorageWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产管理类（次）">
            {{ formItem.statsAssetWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文档管理类（次）">
            {{ formItem.statsDocumentWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他辅助类（次）">
            {{ formItem.statsAssistWork }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="增值服务类（次）">
            {{ formItem.statsIncrementWork }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工作亮点">
            {{ formItem.excellence }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工作感想">
            {{ formItem.experience }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="目标及计划">
            {{ formItem.target }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="总结">
            {{ formItem.content }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

// 定义一个表单原始项
const formItem = {
  questionnaireId: '',
  preface: '',
  statsRoutineWork: 0,
  statsEnvWork: 0,
  statsNetworkWork: 0,
  statsSecurityWork: 0,
  statsServerWork: 0,
  statsStorageWork: 0,
  statsAssetWork: 0,
  statsDocumentWork: 0,
  statsAssistWork: 0,
  statsIncrementWork: 0,
  excellence: '',
  experience: '',
  target: '',
  content: ''
}

import { detail } from '@neu/dcom-ui/api/questionnairefeedback'
import { list as searchQuestionnaire } from '@neu/dcom-ui/api/questionnaire'
export default {
  name: 'QuestionnaireFeedbackViewForm',
  props: {
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      /** 行数 */
      rows: 2,
      // 所有任务
      availableQuestionnaire: []
    }
  },
  computed: {
    questionnaireName: function() {
      const item = this.availableQuestionnaire.find(it => it.id === this.formItem.questionnaireId)
      return item ? item.title : this.formItem.questionnaireId
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
    searchQuestionnaire({ s_published: true }).then(response => {
      this.availableQuestionnaire = response.data
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          const data = response.data
          this.formItem = {
            ...data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
